<template>
  <!-- 机器监控主页面 -->
  <div class="monitor">
    <el-row :gutter="15">
      <el-col :span="16" :xs="24">
        <!-- 左侧 -->
        <div class="monitor-left">
          <div class="robot-info box-shadow">
            <el-row class="shadow-row">
              <el-col :span="6" class="robot-info-col-first">
                <TaskIssue :gdType="gdType"></TaskIssue>
              </el-col>
              <el-col :span="12">
                <TaskProcess
                  :taskStatus="taskStatus"
                  :progress="progress"
                  :taskId="taskId"
                  :demission="demission"
                  :taskName="taskName"
                  :taskInfo="taskInfo"
                  :progreeTitle="progreeTitle"
                  :totalTaskCount="totalTaskCount"
                  :executedTaskCount="executedTaskCount"
                  :unExecutedTaskCount="unExecutedTaskCount"
                  :abNormalCount="abNormalCount"
                  :normalCount="normalCount"
                  :isChoosenMode="isChoosenMode"
                  :hours="hours"
                  :minutes="minutes"
                  :seconds="seconds"
                  @handleTask="taskHandle"
                  @handelMission="handelMission"
                ></TaskProcess>
              </el-col>
              <!-- 宫格 -->
              <el-col :span="6">
                <EnvGrids
                  :envInfoList="envInfoList"
                  v-if="envInfoList.length > 0"
                ></EnvGrids>
              </el-col>
            </el-row>
          </div>
          <div class="position-info box-shadow">
            <RobotStatus :isChoosenMode="isChoosenMode"></RobotStatus>
            <!-- <RobotPosition
              :moveMotor="moveMotor"
              :robotPositionInfo="robotPositionInfo"
              :cameraInfo="cameraInfo"
              :isShowSJB="isShowSJB"
            ></RobotPosition> -->
          </div>
          <div class="map box-shadow">
            <el-row class="shadow-row">
              <NewOrbitalRobot
                v-if="moveMotor && moveMotor == '1'"
                :moveMotor="globalRobotInfo.moveMotor"
                :robotPositionInfo="robotPositionInfo"
                :isShowSJB="isShowSJB"
                :cameraInfo="cameraInfo"
                :gdType="gdType"
              ></NewOrbitalRobot>
              <NewWheel
                v-else-if="moveMotor && moveMotor !== '1'"
                :moveMotor="globalRobotInfo.moveMotor"
                :robotPositionInfo="robotPositionInfo"
                :isShowSJB="isShowSJB"
                :cameraInfo="cameraInfo"
                :gdType="gdType"
              ></NewWheel>
              <!-- 轮式 -->
              <!-- <wheel v-else></wheel> -->
              <!-- 轨道  -->
            </el-row>
          </div>
          <div class="table box-shadow">
            <el-row class="shadow-row tabs-table">
              <el-tabs v-model="activeName">
                <el-tab-pane :label="$t('对象巡检结果')" name="first">
                  <inspectionResults></inspectionResults>
                </el-tab-pane>
                <el-tab-pane :label="$t('巡检对象告警')" name="second">
                  <objectAlarm></objectAlarm>
                </el-tab-pane>
                <el-tab-pane
                  :label="$t('环境告警')"
                  align="center"
                  name="third"
                >
                  <environmentAlarm></environmentAlarm>
                </el-tab-pane>
                <el-tab-pane
                  :label="$t('综合告警')"
                  align="center"
                  name="fifth"
                  :isShowSearch="false"
                  :height="218"
                >
                  <synthAlarm></synthAlarm>
                </el-tab-pane>
                <el-tab-pane
                  :label="$t('系统告警')"
                  align="center"
                  name="fourth"
                >
                  <systemAlarm></systemAlarm>
                </el-tab-pane>
              </el-tabs>
              <div class="table-more cursor-pointer" @click="getMore">
                {{ $t("更多") }}
              </div>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8" :xs="24">
        <!-- 右侧 -->
        <div class="monitor-right">
          <!-- 可见光 -->
          <div class="camero box-shadow">
            <!-- :isTalkBack="isTalkBack" -->
            <FlvRoom
              :idName="'camerovideo'"
              :roomId="cameraRoomId"
              :height="300"
            ></FlvRoom>
            <div class="camero-fix-b">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('可见光拍照')"
                placement="bottom"
                :style="
                  isChoosenMode == 0 ? 'cursor:default ' : 'cursor: pointer'
                "
              >
                <img
                  class="cursor-pointer"
                  :src="oneImg"
                  alt=""
                  @click="cameraControl('4X61')"
                />
              </el-tooltip>

              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('可见光录像')"
                placement="bottom"
                :style="
                  isChoosenMode == 0 ? 'cursor:default ' : 'cursor: pointer'
                "
              >
                <img
                  style="margin-left: 20px"
                  class="cursor-pointer"
                  :src="twoImg"
                  alt=""
                  @click="videoControl('camero')"
                />
              </el-tooltip>
              <el-tooltip
                v-show="videoShow"
                class="item"
                effect="dark"
                :content="$t('重启视频流')"
                placement="bottom"
                :style="
                  isChoosenMode == 0 ? 'cursor:default ' : 'cursor: pointer'
                "
              >
                <img
                  style="margin-left: 20px"
                  class="cursor-pointer"
                  :src="threeImg"
                  @click="restartVideo"
                  alt=""
                />
              </el-tooltip>
              <el-tooltip
                v-if="parameterValue === '2'"
                class="item"
                effect="dark"
                :content="$t('实时音频分析')"
                placement="bottom"
                :style="
                  isChoosenMode == 0 ? 'cursor:default ' : 'cursor: pointer'
                "
              >
                <img
                  style="margin-left: 20px"
                  class="cursor-pointer"
                  :src="shishiImg"
                  alt=""
                  @click="audioAnalysisClick"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('双向对讲')"
                placement="bottom"
                :style="
                  isChoosenMode == 0 ? 'cursor:default ' : 'cursor: pointer'
                "
              >
                <img
                  style="margin-left: 20px"
                  class="cursor-pointer"
                  :src="fourImg"
                  @click="talkBack"
                  alt=""
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('录音')"
                placement="bottom"
                :style="
                  isChoosenMode == 0 ? 'cursor:default ' : 'cursor: pointer'
                "
              >
                <img
                  style="margin-left: 20px"
                  class="cursor-pointer"
                  @click="audiobtn"
                  :src="fiveImg"
                  alt=""
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('补光灯开关')"
                placement="bottom"
                :style="
                  isChoosenMode == 0 ? 'cursor:default ' : 'cursor: pointer'
                "
              >
                <img
                  style="margin-left: 20px"
                  class="cursor-pointer"
                  :src="sixImg"
                  alt=""
                  @click="robotSetting('light')"
                />
              </el-tooltip>
              <el-tooltip
                v-if="isShowBSD"
                class="item"
                effect="dark"
                :content="$t('爆闪灯开关')"
                placement="bottom"
                :style="
                  isChoosenMode == 0 ? 'cursor:default ' : 'cursor: pointer'
                "
              >
                <img
                  style="margin-left: 20px"
                  class="cursor-pointer"
                  :src="bsImg"
                  alt=""
                  @click="ledControl()"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('雨刮器开关')"
                placement="bottom"
                :style="
                  isChoosenMode == 0 ? 'cursor:default ' : 'cursor: pointer'
                "
              >
                <img
                  style="margin-left: 20px"
                  class="cursor-pointer"
                  :src="sevenImg"
                  alt=""
                  @click="robotSetting('wiper')"
                />
              </el-tooltip>
            </div>
            <!-- 焦距和变倍 -->
            <div class="focal-multiple">
              <el-popover
                popper-class="popper-item"
                trigger="click"
                class="item"
                placement="top"
              >
                <div>
                  <div
                    @mousedown="longPress('4X55', '4X11')"
                    @mouseup="(e) => stopLongPress(e, '4X13')"
                    class="enlargeImg"
                  >
                    <img :src="enlarge" alt="" />
                  </div>
                  <div
                    @mousedown="longPress('4X56', '4X12')"
                    @mouseup="(e) => stopLongPress(e, '4X13')"
                    class="enlargeImg"
                  >
                    <img :src="narrow" alt="" />
                  </div>
                </div>
                <img
                  slot="reference"
                  :title="$t('变倍')"
                  v-if="isChoosenMode != 0"
                  :src="multipleImg"
                  alt=""
                />
                <img
                  v-else
                  slot="reference"
                  class="cursor-pointer"
                  :src="greyMultiple"
                  :title="$t('变倍')"
                />
              </el-popover>
              <el-popover
                trigger="click"
                popper-class="popper-item"
                class="item"
                placement="top"
              >
                <div>
                  <div
                    @mousedown="longPress('4X57', '4X31')"
                    @mouseup="(e) => stopLongPress(e, '4X33')"
                    class="enlargeImg"
                  >
                    <img :src="enlarge" alt="" />
                  </div>
                  <div class="autoText">
                    <div style="padding-top: 4px">{{ $t("自") }}</div>
                    <div>{{ $t("动") }}</div>
                  </div>
                  <div
                    @mousedown="longPress('4X58', '4X32')"
                    @mouseup="(e) => stopLongPress(e, '4X33')"
                    class="enlargeImg"
                  >
                    <img :src="narrow" alt="" />
                  </div>
                </div>
                <img
                  slot="reference"
                  :title="$t('焦距')"
                  style="margin-left: 20px"
                  v-if="isChoosenMode != 0"
                  :src="focalLength"
                  alt=""
                />
                <img
                  slot="reference"
                  :title="$t('焦距')"
                  style="margin-left: 20px"
                  v-else
                  class="cursor-pointer"
                  :src="greyFocal"
                  alt=""
                />
              </el-popover>
            </div>
          </div>
          <!-- 红外 -->
          <div class="red-p box-shadow">
            <FlvRoom
              :idName="'thermalvideo'"
              :roomId="thermalRoomId"
              :height="400"
            ></FlvRoom>
            <div class="camero-fix-b">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('热像仪拍照')"
                placement="bottom"
                :style="
                  isChoosenMode == 0 ? 'cursor:default ' : 'cursor: pointer'
                "
              >
                <img
                  class="cursor-pointer"
                  :src="redOneImg"
                  alt=""
                  @click="cameraControl('4X71')"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                :content="$t('热像仪录像')"
                placement="bottom"
                :style="
                  isChoosenMode == 0 ? 'cursor:default ' : 'cursor: pointer'
                "
              >
                <img
                  style="margin-left: 20px"
                  class="cursor-pointer"
                  :src="redTwoImg"
                  alt=""
                  @click="videoControl('red')"
                />
              </el-tooltip>
              <el-tooltip
                v-show="false"
                class="item"
                effect="dark"
                :content="$t('重启视频流')"
                placement="bottom"
                :style="
                  isChoosenMode == 0 ? 'cursor:default ' : 'cursor: pointer'
                "
              >
                <img
                  style="margin-left: 20px"
                  class="cursor-pointer"
                  :src="redThreeImg"
                  alt=""
                />
              </el-tooltip>
            </div>
          </div>
          <!-- 机器人控制 -->
          <div class="controls box-shadow">
            <!-- 第一列模式控制 -->
            <div class="mode-type">
              <div
                v-if="
                  item.label == $t('手持遥控')
                    ? ishowHold == 1
                      ? true
                      : false
                    : true
                "
                v-for="(item, index) in modesTitle"
                :key="index"
                @click="chooseMode(index)"
                :style="{
                  cursor:
                    item.label == $t('手持遥控')
                      ? ishowHold == 1
                        ? 'pointer'
                        : 'default'
                      : 'pointer',
                }"
                :class="[index === isChoosenMode ? 'modesActiva' : 'modes']"
              >
                <div>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.label"
                    placement="bottom"
                  >
                    <img :src="item.url[item.i]" />
                  </el-tooltip>
                </div>
              </div>
            </div>
            <!-- 第二列ws -->
            <div class="mode-instruct">
              <div class="cardInfos">
                <!-- 机器人移动 -->
                <div
                  :class="[
                    'robot-move',
                    isChoosen[0].type == true ? 'current-box' : '',
                  ]"
                  @click="currenRobOpera('0')"
                >
                  <div class="p">{{ $t("机器人移动") }}</div>
                  <div class="b">
                    <div
                      class="controls-imgs"
                      :style="
                        moveMotor == '1'
                          ? 'display: flex;flex-direction: column;align-items: center'
                          : ''
                      "
                    >
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('向左横向行走')"
                        placement="left-start"
                      >
                        <img
                          v-show="moveMotor != '1'"
                          class="cursor-pointer"
                          src="../../../assets/images/home/left-arrow.png"
                          alt=""
                          style="border-radius: 6px"
                          :style="
                            isMoveLeft
                              ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                              : ''
                          "
                          @mousedown="longRobotMove('1X34')"
                          @mouseleave="(e) => stopLongRobotMove(e, '1X3')"
                          @mouseup="(e) => stopLongRobotMove(e, '1X3')"
                        />
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('前进')"
                        placement="top"
                      >
                        <img
                          class="cursor-pointer"
                          src="../../../assets/images/home/top-arrow.png"
                          alt=""
                          style="border-radius: 6px"
                          :style="
                            isMoveForward
                              ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                              : ''
                          "
                          @mousedown="longRobotMove('1X31')"
                          @mouseleave="(e) => stopLongRobotMove(e, '1X3')"
                          @mouseup="(e) => stopLongRobotMove(e, '1X3')"
                        />
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('向右横向行走')"
                        placement="right-start"
                      >
                        <img
                          v-show="moveMotor != '1'"
                          class="cursor-pointer"
                          src="../../../assets/images/home/right-arrow.png"
                          alt=""
                          style="border-radius: 6px"
                          :style="
                            isMoveRight
                              ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                              : ''
                          "
                          @mousedown="longRobotMove('1X33')"
                          @mouseleave="(e) => stopLongRobotMove(e, '1X3')"
                          @mouseup="(e) => stopLongRobotMove(e, '1X3')"
                        />
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('原地左旋')"
                        placement="left-end"
                      >
                        <img
                          v-show="moveMotor != '1'"
                          class="cursor-pointer"
                          src="../../../assets/images/home/left-wan.png"
                          alt=""
                          style="border-radius: 6px"
                          :style="
                            isMoveRotateLeft
                              ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                              : ''
                          "
                          @mousedown="longRobotMove('1X36')"
                          @mouseleave="(e) => stopLongRobotMove(e, '1X3')"
                          @mouseup="(e) => stopLongRobotMove(e, '1X3')"
                        />
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('后退')"
                        placement="bottom"
                      >
                        <img
                          class="cursor-pointer"
                          src="../../../assets/images/home/down-arrow.png"
                          alt=""
                          style="border-radius: 6px"
                          :style="
                            isMoveQuit
                              ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                              : ''
                          "
                          :class="moveMotor == '1' ? 'orbital-sty' : ''"
                          @mousedown="longRobotMove('1X32')"
                          @mouseleave="(e) => stopLongRobotMove(e, '1X3')"
                          @mouseup="(e) => stopLongRobotMove(e, '1X3')"
                        />
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('原地右旋')"
                        placement="right-end"
                      >
                        <img
                          v-show="moveMotor != '1'"
                          class="cursor-pointer"
                          src="../../../assets/images/home/right-wan.png"
                          alt=""
                          style="border-radius: 6px"
                          :style="
                            isRotateInSitu
                              ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                              : ''
                          "
                          @mousedown="longRobotMove('1X35')"
                          @mouseleave="(e) => stopLongRobotMove(e, '1X3')"
                          @mouseup="(e) => stopLongRobotMove(e, '1X3')"
                        />
                      </el-tooltip>
                    </div>
                    <div
                      class="scram cursor-pointer"
                      :style="
                        isMoveStop
                          ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                          : ''
                      "
                      @mousedown="robotMoveStop('1X3')"
                      @mouseup="robotMoveStopUp"
                    >
                      {{ $t("停止") }}
                    </div>
                    <el-slider
                      v-model="moveSpeed"
                      :max="10"
                      class="arm-slider"
                    ></el-slider>
                  </div>
                </div>
                <!-- 升降臂 -->
                <div
                  v-if="isShowSJB"
                  :class="[
                    'robot-lift-arm',
                    isChoosen[1].type == true ? 'current-box' : '',
                  ]"
                  @click="currenRobOpera('1')"
                >
                  <div class="p">{{ liftTitle }}</div>
                  <div class="b yun-control">
                    <div class="imgs-p">
                      <div class="yun-one-imgs">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="上升"
                          placement="top"
                        >
                          <img
                            class="cursor-pointer"
                            src="../../../assets/images/home/top-arrow.png"
                            alt=""
                            style="border-radius: 6px"
                            :style="
                              isArmUp
                                ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                                : ''
                            "
                            @mousedown="longUpDownArm('1X41')"
                            @mouseleave="(e) => stopLongUpDownArm(e, '1X4')"
                            @mouseup="(e) => stopLongUpDownArm(e, '1X4')"
                          />
                        </el-tooltip>
                      </div>
                      <div class="yun-se-imgs">
                        <el-tooltip
                          v-if="isShowJF"
                          class="item"
                          effect="dark"
                          :content="$t('局放伸出')"
                          placement="left-start"
                        >
                          <img
                            class="cursor-pointer"
                            src="../../../assets/images/home/left-arrow.png"
                            alt=""
                            style="border-radius: 6px"
                            :style="
                              isJFOut
                                ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                                : ''
                            "
                            @mousedown="longUpDownArm('1X58')"
                            @mouseleave="(e) => stopLongUpDownArm(e, '1X4')"
                            @mouseup="(e) => stopLongUpDownArm(e, '1X4')"
                          />
                        </el-tooltip>
                        <span class="zhan-span"></span>
                        <el-tooltip
                          v-if="isShowJF"
                          class="item"
                          effect="dark"
                          :content="$t('局放缩回')"
                          placement="right-start"
                        >
                          <img
                            src="../../../assets/images/home/right-arrow.png"
                            alt=""
                            style="border-radius: 6px"
                            :style="
                              isJSInner
                                ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                                : ''
                            "
                            class="yun-img-col2 cursor-pointer"
                            @mousedown="longUpDownArm('1X59')"
                            @mouseleave="(e) => stopLongUpDownArm(e, '1X4')"
                            @mouseup="(e) => stopLongUpDownArm(e, '1X4')"
                          />
                        </el-tooltip>
                      </div>
                      <div class="yun-th-imgs">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="下降"
                          placement="bottom"
                          :style="isShowJF ? '' : 'margin-top: 25px'"
                        >
                          <img
                            class="cursor-pointer"
                            src="../../../assets/images/home/down-arrow.png"
                            alt=""
                            style="border-radius: 6px"
                            :style="
                              isArmDown
                                ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                                : ''
                            "
                            @mousedown="longUpDownArm('1X42')"
                            @mouseleave="(e) => stopLongUpDownArm(e, '1X4')"
                            @mouseup="(e) => stopLongUpDownArm(e, '1X4')"
                          />
                        </el-tooltip>
                      </div>
                    </div>
                    <div class="yun-btns">
                      <div
                        :style="
                          isArmStop
                            ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                            : ''
                        "
                        class="arm-stop cursor-pointer"
                        @mousedown="armStopDown('1X4')"
                        @mouseup="armStopUp"
                      >
                        {{ $t("停止") }}
                      </div>
                      <div
                        :style="
                          isArmZero
                            ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                            : ''
                        "
                        class="arm-back-zero cursor-pointer"
                        @mousedown="armStopDown('1X43')"
                        @mouseup="armStopUp"
                      >
                        {{ $t("回零") }}
                      </div>
                    </div>
                    <el-slider
                      v-model="armSpeed"
                      :max="10"
                      class="arm-slider"
                    ></el-slider>
                  </div>
                </div>
                <!-- 云台控制 -->
                <div
                  :class="[
                    'robot-yuntai-control',
                    isChoosen[2].type == true ? 'current-box' : '',
                  ]"
                  @click="currenRobOpera('2')"
                >
                  <div class="p">{{ $t("云台控制") }}</div>
                  <div class="b yun-control">
                    <div class="yun-one-imgs">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('可见光垂直向上旋转')"
                        placement="left-start"
                      >
                        <img
                          class="cursor-pointer"
                          src="../../../assets/images/home/top-arrow.png"
                          alt=""
                          style="border-radius: 6px"
                          :style="
                            isCameroUp
                              ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                              : ''
                          "
                          @mousedown="longYunTai('1X53')"
                          @mouseleave="(e) => stopLongYunTai(e, '1X5')"
                          @mouseup="(e) => stopLongYunTai(e, '1X5')"
                        />
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('热像仪垂直向上旋转')"
                        placement="right-start"
                      >
                        <img
                          v-if="isShowYT"
                          src="../../../assets/images/home/top-arrow.png"
                          alt=""
                          style="border-radius: 6px"
                          :style="
                            isRedUp
                              ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                              : ''
                          "
                          class="yun-img-col2 cursor-pointer"
                          @mousedown="longYunTai('1X55')"
                          @mouseleave="(e) => stopLongYunTai(e, '1X5')"
                          @mouseup="(e) => stopLongYunTai(e, '1X5')"
                        />
                      </el-tooltip>
                    </div>
                    <div class="yun-se-imgs">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('水平左转')"
                        placement="left-start"
                      >
                        <img
                          class="cursor-pointer"
                          src="../../../assets/images/home/left-arrow.png"
                          alt=""
                          style="border-radius: 6px"
                          :style="
                            isCamoreLeft
                              ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                              : ''
                          "
                          @mousedown="longYunTai('1X52')"
                          @mouseleave="(e) => stopLongYunTai(e, '1X5')"
                          @mouseup="(e) => stopLongYunTai(e, '1X5')"
                        />
                      </el-tooltip>
                      <span class="zhan-span"></span>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('水平右转')"
                        placement="right-start"
                      >
                        <img
                          src="../../../assets/images/home/right-arrow.png"
                          alt=""
                          style="border-radius: 6px"
                          :style="
                            isRedRight
                              ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                              : ''
                          "
                          class="yun-img-col2 cursor-pointer"
                          @mousedown="longYunTai('1X51')"
                          @mouseleave="(e) => stopLongYunTai(e, '1X5')"
                          @mouseup="(e) => stopLongYunTai(e, '1X5')"
                        />
                      </el-tooltip>
                    </div>
                    <div class="yun-th-imgs">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('可见光垂直向下旋转')"
                        placement="left-start"
                      >
                        <img
                          class="cursor-pointer"
                          src="../../../assets/images/home/down-arrow.png"
                          alt=""
                          style="border-radius: 6px"
                          :style="
                            isCameroDown
                              ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                              : ''
                          "
                          @mousedown="longYunTai('1X54')"
                          @mouseleave="(e) => stopLongYunTai(e, '1X5')"
                          @mouseup="(e) => stopLongYunTai(e, '1X5')"
                        />
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="$t('热像仪垂直向下旋转')"
                        placement="right-start"
                      >
                        <img
                          v-if="isShowYT"
                          src="../../../assets/images/home/down-arrow.png"
                          alt=""
                          style="border-radius: 6px"
                          :style="
                            isRedDown
                              ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                              : ''
                          "
                          class="yun-img-col2 cursor-pointer"
                          @mousedown="longYunTai('1X56')"
                          @mouseleave="(e) => stopLongYunTai(e, '1X5')"
                          @mouseup="(e) => stopLongYunTai(e, '1X5')"
                        />
                      </el-tooltip>
                    </div>
                    <div class="yun-btns">
                      <div
                        class="arm-stop cursor-pointer"
                        :style="
                          isYunTaiStop
                            ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                            : ''
                        "
                        @mousedown="yunTaiStopDown('1X5')"
                        @mouseup="yunTaiStopUp"
                      >
                        {{ $t("停止") }}
                      </div>
                      <div
                        :style="
                          isYunTaiZero
                            ? 'border: 1px solid rgba(0, 209, 255, 0.8)'
                            : ''
                        "
                        class="arm-back-zero cursor-pointer"
                        @mousedown="yunTaiStopDown('1X57')"
                        @mouseup="yunTaiStopUp"
                      >
                        {{ $t("回零") }}
                      </div>
                    </div>
                    <el-slider
                      v-model="yunSpeed"
                      :max="10"
                      class="arm-slider"
                      style="margin-top: 2px"
                    ></el-slider>
                  </div>
                </div>
                <!-- 可见光 -->
                <div style="display: flex; flex-direction: column">
                  <!-- 可见光 -->
                  <div
                    v-if="isShowJXB"
                    :class="[
                      'mech-arm-light',
                      isChoosen[3].type == true ? 'current-box' : '',
                    ]"
                    @click="currenRobOpera('3')"
                  >
                    <div class="p">机械臂</div>
                    <div class="specialItem">
                      <div @click="settingMoreArms" class="cursor-pointer">
                        设置
                      </div>
                    </div>
                  </div>
                  <!-- 第二块 -->
                  <div class="z" style="margin-left: 10px">
                    <div>
                      <div class="point-move">
                        <div
                          v-for="(item, index) in pointContiList"
                          :key="index"
                          @click="pointContiClick(item.type)"
                          :class="item.bool ? 'current-point-move' : ''"
                        >
                          {{ item.label }}
                        </div>
                      </div>
                      <!-- <div class="fine-tun cursor-pointer">
                        <div>微调</div>
                      </div> -->
                    </div>
                    <div class="suport-key">
                      <span>{{ $t("支持键盘控制") }}</span>
                      <el-popover
                        placement="top-start"
                        width="200"
                        trigger="hover"
                      >
                        <div class="pop-over-header">
                          <el-row>
                            <el-col :span="6">Shift：</el-col>
                            <el-col :span="18">{{ $t("切换控制对象") }}</el-col>
                          </el-row>
                        </div>
                        <div slot="reference">
                          <img
                            class="cursor-pointer"
                            src="../../../assets/images/home/questMark.png"
                            alt=""
                          />
                        </div>
                      </el-popover>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-if="showFloatLayer"
              class="float-layer"
              @click="floatLayerClick"
            ></div>
          </div>
        </div>
      </el-col>
    </el-row>
    <AudioAnalysis
      :analysisDialog="analysisDialog"
      @input="analysisClose"
    ></AudioAnalysis>
    <MechArms
      :mechArmDialog="mechArmDialog"
      @GoTo="GoTo"
      @armDialogCancle="armDialogCancle"
    >
    </MechArms>
    <todayDialog
      @handelMissionShow="handelMissionShow"
      :dialogVal="dialogVal"
      :totalTaskCount="totalTaskCount"
      :executedTaskCount="executedTaskCount"
      :unExecutedTaskCount="unExecutedTaskCount"
      :abNormalCount="abNormalCount"
      :normalCount="normalCount"
    ></todayDialog>
  </div>
</template>
<script>
import { calFontColor } from "./js/index.js";
import resize from "@/mixins/resize";
import { mapGetters } from "vuex";
import NewOrbitalRobot from "@/components/NewOrbitalRobot/index.vue";
import NewWheel from "@/components/NewWheel/index.vue";
import inspectionResults from "./components/inspectionResults.vue";
import objectAlarm from "./components/objectAlarm.vue";
import environmentAlarm from "./components/environmentAlarm.vue";
import systemAlarm from "./components/systemAlarm.vue";
import synthAlarm from "./components/synthAlarm.vue";
import envsGird from "./components/envsGird.vue";
import FlvRoom from "@/components/flvRoomRobot/index.vue";
import AudioAnalysis from "./components/AudioAnalysis.vue";
import MechArms from "./components/MechArms.vue";
import todayDialog from "@/views/robot/monitor/components/todayDialog";
import TaskIssue from "./components/TaskIssue.vue";
import RobotStatus from "./components/RobotStatus.vue";
import TaskProcess from "./components/TaskProcess.vue";
import EnvGrids from "./components/EnvGrids.vue";
import RobotPosition from "./components/RobotPosition.vue";
import { Recorder, useWebSocket, useWebSocket2, stopAudio } from "./js/speek";

import {
  API_robotMove, //机器人移动
  API_robotArm, //升降臂
  API_robotYunTai, //云台控制
  API_cameraControl, //摄像头控制
  API_robotSetting, //机器人控制
  API_taskControl, //任务控制
  API_moveSpeed, //行走速度
  API_positionInfo, //机器人位置信息
  API_cameraInfo, //获取可见光相机实时状态
  API_nextTaskInfo, //下一个任务信息
  API_topInfo, //头部信息
  API_getRobotRunMode, //机器人任务模式
  API_getParameters, //获取所有参数 机器人控制按钮显示、隐藏
  API_humTempInfo, //温度、湿度信息
  API_batteryInfo, //双向对讲
  API_realTimeAudio, //实时音频分析
  API_restartVideo, //重启视频流
  API_armControl, //机械臂控制
  API_flashLedControl, //爆闪灯开关
} from "@/api/robot/monitor";
import { API_RobotInfo } from "@/api/login";
import { API_getcalendarpageList } from "@/api/task/calendar";
export default {
  dicts: ["taskType"],
  mixins: [resize],
  components: {
    NewWheel, //轮式地图
    NewOrbitalRobot,
    inspectionResults,
    objectAlarm,
    environmentAlarm,
    systemAlarm,
    synthAlarm,
    envsGird,
    FlvRoom,
    AudioAnalysis,
    MechArms,
    todayDialog,
    TaskIssue,
    RobotStatus,
    TaskProcess,
    EnvGrids,
    RobotPosition,
  },
  data() {
    return {
      //不同状态不同颜色-日历
      calFontColor: calFontColor,
      //状态 + 颜色
      statusInfo: [
        {
          label: this.$t("等待执行"),
          bgc: "#00D1FF",
        },
        {
          label: this.$t("任务超期"),
          bgc: "#FFAD30",
        },
        {
          label: this.$t("正在执行"),
          bgc: "#FF4967",
        },
        {
          label: this.$t("任务暂停"),
          bgc: "#FF7000",
        },
        {
          label: this.$t("执行完成"),
          bgc: "#73F6AF",
        },
        {
          label: this.$t("中途停止"),
          bgc: "#CC77DC ",
        },
      ],
      ishowHold: "",
      dialogVal: false,
      record: null,
      audioContext: null,
      mechArmDialog: false, //机械臂弹框
      videoShow: true, //隐藏重启视频流
      analysisDialog: false, //实时分析弹框dialog
      notRefresh: true, //是否执行刷新操作
      isShowTH: false,
      isShowYS: "", //是否展示雨刷
      isShowSJB: false, //是否展示升降臂
      isShowYT: false, //展示云台个数
      isShowJF: false, //是否展示局放
      isShowJXB: false, //是否展示机械臂
      gdType: false, //供电方式
      // 机器人移动
      isMoveLeft: false, //左转高亮
      isMoveForward: false, //前进
      isMoveRight: false, //右转
      isMoveRotateLeft: false, //左旋
      isMoveQuit: false, //后退
      isRotateInSitu: false, //原地旋转
      isMoveStop: false, //停止
      // 升降臂
      isArmUp: false, //上升
      isArmDown: false, //下降
      isJFOut: false, //伸出
      isJSInner: false, //缩回
      isArmStop: false, //停止
      isArmZero: false, //归零
      //云台控制
      isCameroUp: false, //可见光向上
      isRedUp: false, //热像仪向上
      isCamoreLeft: false, //可见光左转
      isRedRight: false, //热像仪向右
      isCameroDown: false, //可见光向下
      isRedDown: false, //热像仪向下
      isYunTaiStop: false, //停止
      isYunTaiZero: false, //归零
      //可见光
      isZoomLess: false, //变倍 减
      isZoomMore: false, //变倍 加
      isFocalLess: false, //焦距 减
      isFocalMore: false, //焦距 加
      contrller: false, //判断点动 连续
      cameroVideoStart: true, //可见光-区分开始、结束录制
      cameroAudioStart: true, //可将光-音频录制
      talkBool: true, //可见光双向对讲
      // isTalkBack: false, //控制视频、双向对讲
      redVideoStart: true, //红外-区分开始、结束录制
      isLightStart: true, //机器人照明 开
      isWiperStart: true, //雨刷 开
      isBSStrat: true, //爆闪灯 开
      showFloatLayer: false, //机器人操控是否有遮罩层
      isShowBSD: false, //是否展示爆闪灯
      greySevenImg: require("@/assets/images/toggle/seven-grey.png"),
      multipleImg: require("@/assets/images/toggle/multipleImg.png"),
      greyMultiple: require("@/assets/images/toggle/multiple-grey.png"),
      focalLength: require("@/assets/images/toggle/focalLength.png"),
      greyFocal: require("@/assets/images/toggle/focal-grey.png"),
      enlarge: require("@/assets/images/toggle/enlarge.png"),
      narrow: require("@/assets/images/toggle/narrow.png"),
      oneImg: require("@/assets/images/toggle/camero-one.png"),
      redOneImg: require("@/assets/images/toggle/camero-one.png"),
      twoImg: require("@/assets/images/toggle/camero-two.png"),
      redTwoImg: require("@/assets/images/toggle/camero-two.png"),
      threeImg: require("@/assets/images/toggle/camero-three.png"),
      redThreeImg: require("@/assets/images/toggle/camero-three.png"),
      shishiImg: require("@/assets/images/toggle/shishi.png"),
      fourImg: require("@/assets/images/toggle/camero-four.png"),
      fiveImg: require("@/assets/images/toggle/camero-five.png"),
      sixImg: require("@/assets/images/toggle/camero-six.png"),
      sevenImg: require("@/assets/images/toggle/camero-seven.png"),
      bsImg: require("@/assets/images/toggle/bs.png"),
      inputSampleRate: 24000, //双向对讲
      sampleRate: 16000,
      taskStatus: "", //任务进度状态
      demission: "", //1、巡检对象 2、巡检点
      robotTypeImg: "",
      taskId: "", //任务ID
      execId: "", //任务执行ID
      progress: 0, //任务进度值
      robotType: "", //机器人机型
      taskName: localStorage.getItem("TaskName"), //任务名称
      progreeTitle: "", //暂停 恢复暂停标题
      robotMoveSpeed: {}, //机器人行走速度
      robotPositionInfo: {}, //机器人位置信息
      cameraInfo: {}, //可见光实时状态
      taskInfo: {}, //任务信息
      envInfoList: [], //环境数据
      totalTaskCount: "", //总任务数
      executedTaskCount: "", //已巡
      unExecutedTaskCount: "", //待巡
      normalCount: "", //正常
      abNormalCount: "", //异常
      hours: "", //倒计时 时
      minutes: "", //倒计时 分
      seconds: "", //倒计时 秒
      selectedStream: [99, 100], //Janus 摄像头房间id
      cameraRoomId: "test1",
      thermalRoomId: "test2",
      cameraPort: "", //可见光 端口
      thermalPort: "", //红外 端口
      cameroUrl: "", //可见光
      cameroRedUrl: "", //红外
      taskStatusEnum: {
        0: this.$t("无"),
        1: this.$t("等待执行"),
        2: this.$t("任务超期"),
        3: this.$t("正在执行"),
        4: this.$t("中途暂停"),
        5: this.$t("执行完成"),
        6: this.$t("中途停止"),
        7: this.$t("识别中"),
        99: this.$t("待机"),
      },
      //被激活的tabs
      activeName: "first",
      //模式控制
      modesTitle: [
        {
          label: this.$t("任务模式"),
          url: [
            require("@/assets/home/one.png"),
            require("@/assets/home/oneSelect.png"),
          ],
          i: 0,
        },
        {
          label: this.$t("远程遥控"),
          url: [
            require("@/assets/home/two.png"),
            require("@/assets/home/twoSelect.png"),
          ],
          i: 0,
        },
        {
          label: this.$t("手持遥控"),
          url: [
            require("@/assets/home/three.png"),
            require("@/assets/home/threeSelect.png"),
          ],
          i: 0,
        },
      ],
      //被选中的index
      isChoosenMode: 1,
      //控制机器人操作高亮
      isChoosen: [
        { type: true }, //设置默认值
        { type: false },
        { type: false },
        { type: false },
      ],
      //点动、连续
      pointContiList: [
        {
          label: this.$t("点动"),
          type: "point",
          bool: false,
        },
        {
          label: this.$t("连续"),
          type: "conti",
          bool: true,
        },
      ],
      currentIndex: 0, //切换模式当前项
      moveSpeed: 2, // 机器人移动速度
      armSpeed: 8, // 升降臂速度
      yunSpeed: 6, // 云台速度
      robotInfoTimer: null, //定时器
      RobotRunModelTimer: null, //车体信息定时器
      envTimer: null,
      robotMoveTimer: null, //机器人移动定时器
      upDownTimer: null, //升降臂定时器
      yunTaiTimer: null, //云台定时器
      cameraTimer: null, //可见光定时器
      realTimeAudio: true,
      parameterValue: "",
      moveMotor: "",
      taskDialog: false,
      execTimes: this.getNowTime(),
      taskExecId: "",
      taskProcess: "", //任务状态
    };
  },
  computed: {
    ...mapGetters(["globalRobotInfo"]),
    // 初始化数据
    liftTitle() {
      //根据机型判断
      if (this.robotType == "T7-C") {
        return "升降台";
      } else {
        if (this.isShowSJB && this.isShowJF) {
          return "升降臂&局放";
        } else {
          return "升降臂";
        }
      }
    },
    isShowSC() {
      const { ishowHold, isChoosenMode } = this;
      return {
        ishowHold,
        isChoosenMode,
      };
    },
  },
  watch: {
    //监听机器人数据
    "globalRobotInfo.moveMotor": {
      handler(newValue, oldValue) {
        //设置默认
        this.pointContiList = [
          {
            label: this.$t("点动"),
            type: "point",
            bool: false,
          },
          {
            label: this.$t("连续"),
            type: "conti",
            bool: true,
          },
        ];
        // 处理参数
        this.contrller = false;
      },
      deep: true,
      immediate: true,
    },
    isChoosenMode: {
      handler(val) {
        this.modesTitle.forEach((item) => {
          item.i = 0;
        });
        this.modesTitle[this.isChoosenMode].i = 1;
        console.warn("切换的值", val);
        //任务模式置灰图标
        if (val == 0) {
          this.oneImg = require("@/assets/images/toggle/disab-one.png");
          this.twoImg = require("@/assets/images/toggle/disab-two.png");
          this.threeImg = require("@/assets/images/toggle/disab-three.png");
          this.fourImg = require("@/assets/images/toggle/disab-four.png");
          this.fiveImg = require("@/assets/images/toggle/disab-five.png");
          this.sixImg = require("@/assets/images/toggle/disab-six.png");
          this.sevenImg = require("@/assets/images/toggle/disab-seven.png");
          this.redOneImg = require("@/assets/images/toggle/disab-one.png");
          this.redTwoImg = require("@/assets/images/toggle/disab-two.png");
          this.redThreeImg = require("@/assets/images/toggle/disab-shishi.png");
          this.bsImg = require("@/assets/images/toggle/disab-bs.png");
        }
      },
      immediate: true,
      deep: true,
    },
    taskStatus: {
      handler(val) {
        if (val == "4") {
          this.$set(this, "progreeTitle", this.$t("恢复"));
        } else {
          this.$set(this, "progreeTitle", this.$t("暂停"));
        }
      },
      immediate: true,
    },
    isShowSC: {
      handler(val) {
        console.warn("shuzhishuzhishuzhi", val);
        if (val.isChoosenMode == 2 && val.ishowHold == 1) {
          return true;
        } else {
          return false;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.getRobotInfo();
    this.getTaskInfo(); //获取任务信息
    this.getRobotType(); //机器人机型
    this.getRobotMoveSpeed(); //机器人速度信息
    this.getRobotPosition(); //机器人位置信息
    this.getCameraInfo(); //可见光实时状态
    this.getParameters(); //控制按钮显示隐藏
    this.getHumTempInfo(); //温度、湿度宫格信息
    let that = this;
    document.onkeydown = function (e) {
      var keyCode = window.event.keyCode;
      switch (keyCode) {
        //shift切换机器人控制模式
        case 16:
          if (
            that.isChoosenMode == 1 &&
            that.isChoosen &&
            that.isChoosen.length > 0
          ) {
            that.currentIndex++;
            //如果是最后一个跳到第一个
            if (that.currentIndex == 4) {
              that.currentIndex = 0;
            }
            that.isChoosen[that.currentIndex]["type"] = true;
            that.isChoosen.forEach((item, index) => {
              if (index != that.currentIndex) {
                item["type"] = false;
              }
            });
          }
          break;
        //A
        case 65:
          break;
        //
        case 87:
          if (that.currentIndex != 1) return;
          //执行上升操作
          break;
        // D
        case 68:
          break;
        // S
        case 83:
          if (that.currentIndex != 1) return;
          //执行下降操作
          break;
        // P
        case 80:
          break;
      }
    };
  },
  mounted() {
    this.getRobotType(); //机器人机型
    this.timeAudio();
    this.envTimer = setInterval(() => {
      this.getHumTempInfo(); //温度、湿度宫格信息
    }, 1000 * 5);
    this.RobotRunModelTimer = setInterval(() => {
      this.getRobotRunModel(); //获取机器人任务模式
      this.getRobotPosition();
      this.getRobotMoveSpeed(); //获取机器人行走速度
      this.getTaskInfo();
    }, 1000);
    // setInterval(() => {
    //   this.getTaskInfo();
    // }, 1000);
    this.robotInfoTimer = setInterval(() => {
      this.getCameraInfo();
    }, 1000 * 5);
    console.log(this.execId);
  },
  methods: {
    /**爆闪灯开关 */
    ledControl() {
      if (this.isChoosenMode == 0) return;
      let cmd = "";
      cmd = this.isBSStrat ? "1X77" : "1X78";
      API_flashLedControl({
        cmd: cmd,
      }).then((res) => {
        if (res.code == 200) {
          if (this.isBSStrat) {
            this.$message.success("爆闪灯开启成功");
            this.bsImg = require("@/assets/images/toggle/bs_active.png");
            this.isBSStrat = false;
          } else {
            this.$message.success("爆闪灯关闭成功");
            this.bsImg = require("@/assets/images/toggle/bs.png");
            this.isBSStrat = true;
          }
        }
      });
    },
    // 获取当前的日期
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      return defaultDate;
    },
    // 点击今日任务总数  弹框
    handelMission() {
      if (this.taskId != -1) {
        return;
      } else {
        this.dialogVal = true;
      }
    },

    /**机械臂设置 */
    settingMoreArms() {
      this.mechArmDialog = true;
    },
    /**弹框内部确认 */
    GoTo(point, speed) {
      //GoTo  参数
      API_armControl({
        cmd: "1X74",
        values: [speed, point],
      }).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message({
            type: "success",
            message: "GoTo基准点命令下发成功！",
          });
        }
      });
    },
    armDialogCancle() {
      this.mechArmDialog = false;
    },
    handelMissionShow() {
      this.dialogVal = false;
    },
    getRobotInfo() {
      API_RobotInfo().then((res) => {
        this.$store.commit("SET_ROBOTINFO", res.data);
        this.$store.dispatch("GetGlobalRobotInfo");
        this.moveMotor = res.data.moveMotor;
      });
    },
    /**重启视频流 */
    restartVideo() {
      if (this.isChoosenMode == 0) return;
      API_restartVideo().then((res) => {
        if (res.code == 200) {
          this.$message.success("视频流重启命令发送成功！");
        }
      });
    },
    // 实施音频分析的显示隐藏
    timeAudio() {
      API_realTimeAudio().then((res) => {
        this.parameterValue = res.data.parameterValue;
      });
    },
    /**实时视频分析btn */
    audioAnalysisClick() {
      if (this.isChoosenMode == 0) return;
      this.analysisDialog = true;
    },
    init(rec) {
      this.record = rec;
      console.warn("rec", rec);
    },
    /**双向对讲 */
    talkBack() {
      if (this.isChoosenMode == 0) return;
      navigator.getUserMedia =
        navigator.getUserMedia || navigator.webkitGetUserMedia;
      if (!navigator.getUserMedia) {
        alert(this.$t("浏览器不支持音频输入"));
      } else {
        if (!this.talkBool) {
          stopAudio(this.record);
          this.talkBool = true; //第一次触发改为true
          this.fourImg = require("@/assets/images/toggle/camero-four.png");
          return;
        }
        this.fourImg = require("@/assets/images/toggle/active-four.png");
        this.talkBool = false; //第一次触发改为true
        navigator.getUserMedia(
          {
            audio: true,
            video: false,
          },
          (mediaStream) => {
            // this.record = new Recorder(mediaStream);
            this.init(
              new Recorder(mediaStream, this.inputSampleRate, this.sampleRate)
            );
            useWebSocket(
              this.record,
              `ws://${window.location.host}:9999/audioServer?roomId=101`
              // `ws://172.17.10.242:9999/audioServer?roomId=101`
            );
            useWebSocket2(
              `ws://${window.location.host}:9999/audioServer?roomId=102`
              // `ws://172.17.10.242:9999/audioServer?roomId=102`
            );
          },
          function (error) {
            switch (error.message || error.name) {
              case "PERMISSION_DENIED":
              case "PermissionDeniedError":
                console.info("用户拒绝提供信息");
                break;
              case "NOT_SUPPORTED_ERROR":
              case "NotSupportedError":
                console.info(this.$t("浏览器不支持硬件设备"));
                break;
              case "MANDATORY_UNSATISFIED_ERROR":
              case "MandatoryUnsatisfiedError":
                console.info(this.$t("无法发现指定的硬件设备"));
                break;
              default:
                console.info(
                  this.$t("无法打开麦克风异常信息") + (error.code || error.name)
                );
                break;
            }
          }
        );
      }
    },
    /**弹框关闭 */
    analysisClose() {
      this.analysisDialog = false;
    },
    /**获取机器人操作模式 */
    getRobotRunModel() {
      API_getRobotRunMode().then((res) => {
        if (res.code == 200 && res.data) {
          let taskModel = "";
          taskModel = res.data.parameterValue;
          if (taskModel == "0") {
            this.isChoosenMode = 0; // 任务
            this.showFloatLayer = true; //添加蒙层
            this.isChoosen.forEach((item, index) => {
              item["type"] = false;
            });
          } else if (taskModel == "1") {
            this.isChoosenMode = 1; //远程
            this.showFloatLayer = false; //蒙层去除
            if (!this.notRefresh) return;
            this.isChoosen = [
              { type: true }, //设置机器人移动为默认选中
              { type: false },
              { type: false },
              { type: false },
            ];
          } else if (taskModel == "2") {
            this.isChoosenMode = 2; // 手持
            this.showFloatLayer = true; //添加蒙层
            this.isChoosen.forEach((item, index) => {
              item["type"] = false;
            });
          }
        }
      });
    },
    /**获取温度湿度宫格信息 */
    getHumTempInfo() {
      API_humTempInfo().then((res) => {
        if (res.code == 200 && res.data) {
          //气体
          let gas = [];
          let imgGasEnum = {
            temperature: require("@/assets/images/home/wd.png"),
            humidity: require("@/assets/images/home/sd.png"),
            pm2D5: require("@/assets/images/home/PM2D5.png"),
            pm1D0: require("@/assets/images/home/PM1D0.png"),
            pm10: require("@/assets/images/home/PM10.png"),
            smog: require("@/assets/images/home/smoke.png"),
            O2: require("@/assets/images/home/O2.png"),
            CO2: require("@/assets/images/home/CO2.png"),
            CO: require("@/assets/images/home/CO.png"),
            SO2: require("@/assets/images/home/SO2.png"),
            CH4: require("@/assets/images/home/CH4.png"),
            H2S: require("@/assets/images/home/H2S.png"),
            masterTemp: require("@/assets/images/home/wd.png"),
          };
          gas = JSON.parse(res.data.gas)
            ? JSON.parse(res.data.gas).env.map((item) => {
                if (item.symbol == "smog") {
                  return {
                    name: item.name,
                    value: item.showValue == 0 ? this.$t("无") : this.$t("有"),
                    isShow: true,
                    imgUrl: imgGasEnum[item.symbol],
                  };
                }
                return {
                  name: item.name,
                  value: +Number(item.showValue).toFixed(1),
                  unit: item.unit,
                  isShow: true,
                  imgUrl: imgGasEnum[item.symbol]
                    ? imgGasEnum[item.symbol]
                    : require("@/assets/images/home/xnqt.png"),
                };
              })
            : [];
          this.envInfoList = [...gas];
        }
      });
    },
    /**获取控制机器人操作按钮显示、隐藏接口 */
    getParameters() {
      API_getParameters().then((res) => {
        if (res.code == 200 && res.data) {
          // 可见光
          this.cameraPort = res.data.cameraTcpPort;
          this.selectedStream[0] = Number(res.data.cameraAudioChannel);
          // 红外
          this.thermalPort = res.data.thermalImagerTcpPort;
          this.selectedStream[1] = Number(res.data.thermalAudioChannel);
          //雨刷
          if (res.data.wiper == "0") {
            this.isShowYS = false;
          } else {
            this.isShowYS = true;
          }
          //升降臂
          if (res.data.lift == "0") {
            this.isShowSJB = false;
          } else {
            this.isShowSJB = true;
          }
          // 云台
          if (res.data.ptz == "2") {
            this.isShowYT = false;
          } else if (res.data.ptz == "3") {
            this.isShowYT = true;
          }
          //局放
          if (res.data.pdd && res.data.pdd > 0) {
            this.isShowJF = true;
          } else {
            this.isShowJF = false;
          }
          //机械臂
          if (res.data.armMotor && res.data.armMotor > 0) {
            this.isShowJXB = true;
          } else {
            this.isShowJXB = false;
          }
          //供电方式 1:锂电池 2:滑触线
          this.gdType = res.data.power == 2 ? false : true;
          console.warn("this.gdType", this.gdType);
          // 手持模式
          this.ishowHold = res.data.supportJoy;
          this.isShowTH = true;
          //双向对讲
          if (res.data.audioType != "") {
            this.inputSampleRate =
              res.data.audioType == 1 ? Number(48000) : Number(24000);
            this.sampleRate =
              res.data.audioType == 1 ? Number(8000) : Number(16000);
          }
        }
      });
    },
    /**获取机器人机型 展示不同的图片 */
    getRobotType() {
      API_topInfo().then((res) => {
        if (res.code == 200) {
          this.isShowBSD = res.data.robotType == "T3-J01" ? true : false;
          this.robotType = res.data.robotType;
          this.robotType = this.robotType.slice(
            0,
            this.robotType.indexOf("-") + 2
          );
          let robotType = [
            "T3C",
            "T3S",
            "T3J",
            "T3F",
            "T5E",
            "T7E",
            "T7S",
            "T7C",
            "T7A",
            "T9W",
            "T9C",
            "T9R",
          ];
          let handleRobotType = this.robotType.replace("-", "");
          if (robotType.indexOf(handleRobotType) != -1) {
            this.robotTypeImg = require(`@/assets/images/robottype/${handleRobotType}.png`);
          } else {
            this.robotTypeImg = require(`@/assets/images/robottype/default.png`);
          }
        }
      });
    },
    /**暂停 终止*/
    taskHandle(type) {
      switch (type) {
        case "pause":
          // 暂停
          if (this.taskStatus == "4") {
            //暂停恢复
            this.$confirm(
              `${this.$t("确定恢复任务")}${this.taskName}?`,
              this.$t("提示"),
              {
                confirmButtonText: this.$t("确定"),
                cancelButtonText: this.$t("取消"),
                type: "warning",
              }
            )
              .then(() => {
                API_taskControl({
                  cmd: "3X11",
                  values: [this.taskId, this.execId],
                }).then((res) => {
                  if (res.code == 200 && res.data.nerrcode == 0) {
                    this.$message({
                      type: "success",
                      message: this.$t("已恢复暂停任务!"),
                    });
                  } else {
                    this.$message.error(this.$t("恢复暂停任务失败请重试"));
                  }
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: this.$t("已取消"),
                });
              });
          } else {
            this.$confirm(
              `${this.$t("确定暂停任务")}${this.taskName}?`,
              this.$t("提示"),
              {
                confirmButtonText: this.$t("确定"),
                cancelButtonText: this.$t("取消"),
                type: "warning",
              }
            )
              .then(() => {
                API_taskControl({
                  cmd: "3X12",
                  values: [this.taskId, this.execId],
                }).then((res) => {
                  if (res.code == 200 && res.data.nerrcode == 0) {
                    this.$message({
                      type: "success",
                      message: this.$t("任务已暂停"),
                    });
                  } else {
                    this.$message.error(this.$t("暂停失败请重试"));
                  }
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: this.$t("已取消"),
                });
              });
          }
          break;
        case "stop":
          this.$confirm(
            `${this.$t("确定终止任务")}${this.taskName}?`,
            this.$t("提示"),
            {
              confirmButtonText: this.$t("确定"),
              cancelButtonText: this.$t("取消"),
              type: "warning",
            }
          )
            .then(() => {
              this.stopTaskGetNextTask();
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: this.$t("已取消"),
              });
            });
          break;
      }
    },
    /**终止当前任务、获取下一个任务 */
    stopTaskGetNextTask() {
      API_taskControl({
        cmd: "3X13",
        values: [this.taskId, this.execId],
      })
        .then((res) => {
          if (res.code == 200 && res.data.nerrcode == 0) {
            this.getTaskInfo();
            this.$message({
              type: "success",
              message: this.$t("任务已终止"),
            });
          } else {
            this.$message.error(this.$t("终止失败请重试"));
          }
        })
        .then(() => {
          //调取下一个任务接口
          API_nextTaskInfo().then((res) => {
            if (res.code == 200 && res.data) {
              //更新任务id
              // this.taskId = res.data.taskId;
              this.taskName = res.data.taskName;
              this.totalTaskCount = res.data.totalTaskCount; //总任务数
              this.executedTaskCount = res.data.executedTaskCount; //已巡
              this.unExecutedTaskCount = res.data.unExecutedTaskCount; //待巡
              this.normalCount = res.data.normalCount; //正常
              this.abNormalCount = res.data.abNormalCount; //异常
              let hasNextTask = res.data.hasNextTask == 0 ? false : true;
              if (!hasNextTask) {
                this.hours = "-";
                this.minutes = "-";
                this.seconds = "-";
              } else {
                this.hours = res.data.hour;
                this.minutes = res.data.minute;
                this.seconds = res.data.second;
              }
            } else {
              this.$message.error(this.$t("请求失败请重试"));
            }
          });
        });
    },
    /**获取机器人行走速度 */
    getRobotMoveSpeed() {
      API_moveSpeed().then((res) => {
        if (res.code == 200 && res.data) {
          this.robotMoveSpeed = JSON.parse(res.data);
        }
      });
    },
    /** 获取机器人位置信息*/
    getRobotPosition() {
      API_positionInfo().then((res) => {
        if (res.code == 200 && res.data) {
          this.robotPositionInfo = JSON.parse(res.data);
        }
      });
    },
    /**获取可见光相机实时状态 */
    getCameraInfo() {
      API_cameraInfo().then((res) => {
        if (res.code == 200 && res.data) {
          this.cameraInfo = JSON.parse(res.data);
        }
      });
    },
    /** 获取任务信息*/
    getTaskInfo() {
      this.$store.dispatch("getGlobalTaskInfo").then((res) => {
        if (res.code == 200 && res.data) {
          this.taskInfo = JSON.parse(res.data);
          this.demission = this.taskInfo.dimension; //巡检点、巡检对象
          this.taskId = JSON.parse(res.data).taskId; //任务ID
          this.taskProcess = JSON.parse(res.data).taskProcess; //任务ID
          this.execId = JSON.parse(res.data).execId; //任务执行ID
          // 根据状态判断展示区域内容
          if (this.taskId != -1) {
            this.taskName = JSON.parse(res.data).taskName; //任务名称
            localStorage.setItem("TaskName", this.taskName);
            this.taskStatus = this.taskInfo.taskProcess; //任务进度状态
            this.progress = Number(this.taskInfo.taskTotalProgress); //任务进度值
            //处理时间
            this.hours = this.taskInfo.hour;
            this.minutes = this.taskInfo.minute;
            this.seconds = this.taskInfo.second;
            // 根据设备类型判断展示内容
            if (this.demission == "2") {
              // 巡检点
              this.totalTaskCount = this.taskInfo.pointAllCount; //总巡检点
              this.executedTaskCount = this.taskInfo.pointExecCount; //已巡
              this.unExecutedTaskCount = this.taskInfo.pointWaitCount; //待巡
              this.normalCount = this.taskInfo.pointSuccessCount; //正常
              this.abNormalCount = this.taskInfo.pointFailCount; //异常
            } else {
              // 设备
              this.totalTaskCount = this.taskInfo.devAllCount; //总设备数
              this.executedTaskCount = this.taskInfo.devExecCount; //已巡
              this.unExecutedTaskCount = this.taskInfo.devWaitCount; //待巡
              this.normalCount = this.taskInfo.devSuccessCount; //正常
              this.abNormalCount = this.taskInfo.devFailCount; //异常
            }
            //处理时间
          } else {
            //调取下一个任务接口
            API_nextTaskInfo().then((res) => {
              if (res.code == 200 && res.data) {
                //更新任务id
                this.taskName = res.data.taskName;
                localStorage.setItem("TaskName", this.taskName);
                this.taskStatus = "99"; //任务进度状态
                this.progress = Number(res.data.taskProcess); //任务进度值
                let hasNextTask = res.data.hasNextTask == 0 ? false : true;
                if (!hasNextTask) {
                  this.hours = "-";
                  this.minutes = "-";
                  this.seconds = "-";
                } else {
                  this.hours = res.data.hour;
                  this.minutes = res.data.minute;
                  this.seconds = res.data.second;
                }
                this.totalTaskCount = res.data.totalTaskCount; //总任务数
                this.executedTaskCount = res.data.executedTaskCount; //已执行
                this.unExecutedTaskCount = res.data.unExecutedTaskCount; //待执行
                this.normalCount = res.data.normalCount; //正常
                this.abNormalCount = res.data.abNormalCount; //异常
              }
            });
          }
        }
      });
    },
    /**表格更多 */
    getMore() {
      let type;
      let typeEnum = [
        {
          name: "second",
          value: "0",
        },
        {
          name: "third",
          value: "1",
        },
        {
          name: "fourth",
          value: "3",
        },
        {
          name: "fifth",
          value: "2",
        },
      ];
      if (this.activeName == "first") {
        this.$router.push({
          path: "/data/objectData",
        });
      } else {
        type = typeEnum.find((item) => item.name == this.activeName).value;
        this.$router.push({
          path: "/data/alarm",
          query: {
            info: type,
          },
        });
      }
    },
    /**机器人控制遮罩层 */
    floatLayerClick() {
      this.$message.info(this.$t("请先切换至远程遥控模式进行操作"));
      return;
    },
    /**摄像头控制 */
    cameraControl(cmd) {
      if (this.isChoosenMode == 0) return;
      API_cameraControl({
        cmd: cmd,
      }).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success(this.$t("操作成功"));
          if (cmd == "4X61") {
            this.oneImg = require("@/assets/images/toggle/active-one.png");
            setTimeout(() => {
              this.oneImg = require("@/assets/images/toggle/camero-one.png");
            }, 500);
          } else if (cmd == "4X71") {
            this.redOneImg = require("@/assets/images/toggle/active-one.png");
            setTimeout(() => {
              this.redOneImg = require("@/assets/images/toggle/camero-one.png");
            }, 500);
          }
        } else {
          this.$message.error(this.$t("操作失败请重试"));
        }
      });
    },
    /**视频录制 */
    videoControl(type) {
      if (this.isChoosenMode == 0) return;
      switch (type) {
        case "camero":
          if (this.cameroVideoStart) {
            API_cameraControl({
              cmd: "4X63",
            }).then((res) => {
              if (res.code == 200 && res.data.nerrcode == 0) {
                this.cameroVideoStart = false;
                this.$message.success(this.$t("可见光录制开始"));
                this.twoImg = require("@/assets/images/toggle/active-two.png");
              } else {
                this.$message.error(this.$t("可见光录制操作失败请重试"));
              }
            });
          } else {
            API_cameraControl({
              cmd: "4X64",
            }).then((res) => {
              if (res.code == 200 && res.data.nerrcode == 0) {
                this.cameroVideoStart = true;
                this.$message.success(this.$t("可见光录制结束"));
                this.twoImg = require("@/assets/images/toggle/camero-two.png");
              } else {
                this.$message.error(this.$t("可见光录制操作失败请重试"));
              }
            });
          }
          break;
        case "red":
          if (this.redVideoStart) {
            API_cameraControl({
              cmd: "4X73",
            }).then((res) => {
              if (res.code == 200 && res.data.nerrcode == 0) {
                this.redTwoImg = require("@/assets/images/toggle/active-two.png");
                this.redVideoStart = false;
                this.$message.success(this.$t("热像仪录制开始"));
              } else {
                this.$message.error(this.$t("热像仪录制失败请重试"));
              }
            });
          } else {
            API_cameraControl({
              cmd: "4X74",
            }).then((res) => {
              if (res.code == 200 && res.data.nerrcode == 0) {
                this.redVideoStart = true;
                this.$message.success(this.$t("热像仪录制结束"));
                this.redTwoImg = require("@/assets/images/toggle/camero-two.png");
              } else {
                this.$message.error(this.$t("热像仪录制失败请重试"));
              }
            });
          }
          break;
      }
    },
    /**录音 */
    audiobtn() {
      if (this.isChoosenMode == 0) return;
      if (this.cameroAudioStart) {
        API_cameraControl({
          cmd: "4X66",
        }).then((res) => {
          if (res.code == 200 && res.data.nerrcode == 0) {
            this.fiveImg = require("@/assets/images/toggle/active-five.png");
            this.cameroAudioStart = false; //下一次点击就是关闭
            this.$message.success(this.$t("音频录制开始"));
          } else {
            this.$message.error(this.$t("操作失败请重试"));
          }
        });
      } else {
        API_cameraControl({
          cmd: "4X67",
        }).then((res) => {
          if (res.code == 200 && res.data.nerrcode == 0) {
            this.fiveImg = require("@/assets/images/toggle/camero-five.png");
            this.cameroAudioStart = true; //下一次点击就是开始录音
            this.$message.success(this.$t("音频录制结束"));
          } else {
            this.$message.error(this.$t("操作失败请重试"));
          }
        });
      }
    },
    /**机器人照明 */
    robotSetting(type) {
      if (this.isChoosenMode == 0) return;
      switch (type) {
        case "light":
          if (this.isLightStart) {
            API_robotSetting({ cmd: "2X31" }).then((res) => {
              if (res.code == 200 && res.data.nerrcode == 0) {
                this.sixImg = require("@/assets/images/toggle/active-six.png");
                this.$message.success(this.$t("机器人补光灯开启"));
                this.isLightStart = false;
              } else {
                this.$message.error(this.$t("操作失败请重试"));
              }
            });
          } else {
            API_robotSetting({ cmd: "2X32" }).then((res) => {
              if (res.code == 200 && res.data.nerrcode == 0) {
                this.sixImg = require("@/assets/images/toggle/camero-six.png");
                this.$message.success(this.$t("机器人补光灯关闭"));
                this.isLightStart = true;
              } else {
                this.$message.error(this.$t("操作失败请重试"));
              }
            });
          }
          break;
        case "wiper":
          if (this.isWiperStart) {
            API_robotSetting({ cmd: "2X21" }).then((res) => {
              if (res.code == 200 && res.data.nerrcode == 0) {
                this.sevenImg = require("@/assets/images/toggle/active-seven.png");
                this.$message.success(this.$t("机器人雨刷开启"));
                this.isWiperStart = false;
              } else {
                this.$message.error(this.$t("操作失败请重试"));
              }
            });
          } else {
            API_robotSetting({ cmd: "2X22" }).then((res) => {
              if (res.code == 200 && res.data.nerrcode == 0) {
                this.sevenImg = require("@/assets/images/toggle/camero-seven.png");
                this.$message.success(this.$t("机器人雨刷关闭"));
                this.isWiperStart = true;
              } else {
                this.$message.error(this.$t("操作失败请重试"));
              }
            });
          }
          break;
      }
    },

    /**选择模式 */
    chooseMode(index) {
      //任务模式切换其他模式需添加提示；其他模式切任务模式不需
      if (index == 2 && this.ishowHold != 1) {
        return false;
      }
      if (this.modesTitle[index].i === 0) {
        console.log(index);
        this.modesTitle.forEach((item) => {
          item.i = 0;
        });
        this.modesTitle[this.isChoosenMode].i = 1;
      }
      if (
        this.isChoosenMode == 0 &&
        this.taskId != -1 &&
        this.taskProcess == "3"
      ) {
        this.$confirm(
          this.$t("当前正在执行任务是否强制切出终止当前任务"),
          this.$t("模式切换"),
          {
            confirmButtonText: this.$t("强制切换"),
            cancelButtonText: this.$t("已取消"),
            type: "warning",
          }
        )
          .then(() => {
            API_taskControl({
              cmd: "3X13",
              values: [this.taskId, this.execId],
            })
              .then((res) => {
                if (res.code == 200 && res.data.nerrcode == 0) {
                  this.getTaskInfo();
                  let cmd = "";
                  switch (index) {
                    case 0:
                      cmd = "2X11";
                      break;
                    case 1:
                      cmd = "2X12";
                      break;
                    case 2:
                      cmd = "2X13";
                      break;
                  }
                  API_robotSetting({ cmd: cmd }).then((res) => {
                    if (res.code == 200 && res.data.nerrcode == 0) {
                      this.isChoosenMode = index; //设置模式高亮
                      if (index == 0 || index == 2) {
                        this.showFloatLayer = true; //添加蒙层
                        this.isChoosen.forEach((item, index) => {
                          item["type"] = false;
                        });
                      } else {
                        this.isChoosen = [
                          { type: true }, //设置机器人移动为默认选中
                          { type: false },
                          { type: false },
                          { type: false },
                        ];
                        this.showFloatLayer = false; //蒙层去除
                      }
                      this.$message.success(this.$t("模式切换成功"));
                    } else {
                      this.$message.error(this.$t("模式切换失败请重试"));
                    }
                  });
                  this.$message({
                    type: "success",
                    message: this.$t("任务已终止"),
                  });
                } else {
                  this.$message.error(this.$t("终止失败请重试"));
                }
              })
              .then(() => {
                //调取下一个任务接口
                API_nextTaskInfo().then((res) => {
                  if (res.code == 200 && res.data) {
                    //更新任务id
                    // this.taskId = res.data.taskId;
                    this.taskName = res.data.taskName;
                    this.totalTaskCount = res.data.totalTaskCount; //总任务数
                    this.executedTaskCount = res.data.executedTaskCount; //已巡
                    this.unExecutedTaskCount = res.data.unExecutedTaskCount; //待巡
                    this.normalCount = res.data.normalCount; //正常
                    this.abNormalCount = res.data.abNormalCount; //异常
                    let hasNextTask = res.data.hasNextTask == 0 ? false : true;
                    if (!hasNextTask) {
                      this.hours = "-";
                      this.minutes = "-";
                      this.seconds = "-";
                    } else {
                      this.hours = res.data.hour;
                      this.minutes = res.data.minute;
                      this.seconds = res.data.second;
                    }
                  } else {
                    this.$message.error(this.$t("请求失败请重试"));
                  }
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: this.$t("已取消模式切换"),
            });
          });
      } else {
        //无任务直接切换
        let cmd = "";
        switch (index) {
          case 0:
            cmd = "2X11";
            break;
          case 1:
            cmd = "2X12";
            break;
          case 2:
            cmd = "2X13";
            break;
        }
        API_robotSetting({ cmd: cmd }).then((res) => {
          if (res.code == 200 && res.data.nerrcode == 0) {
            this.isChoosenMode = index; //设置模式高亮
            if (index == 0 || index == 2) {
              this.showFloatLayer = true; //添加蒙层
              this.isChoosen.forEach((item, index) => {
                item["type"] = false;
              });
            } else {
              this.isChoosen = [
                { type: true }, //设置机器人移动为默认选中
                { type: false },
                { type: false },
                { type: false },
              ];
              this.showFloatLayer = false; //蒙层去除
            }
            this.$message.success(this.$t("模式切换成功"));
          } else {
            this.$message.error(this.$t("模式切换失败请重试"));
          }
        });
      }
    },
    /**选中的机器人操作 设置高亮 */
    currenRobOpera(type) {
      this.notRefresh = false; //不再执行刷新操作
      this.currentIndex = Number(type);
      this.isChoosen.forEach((item, index) => {
        if (index == this.currentIndex) {
          item["type"] = true;
        } else {
          item["type"] = false;
        }
      });
    },
    /**点动、连续 */
    pointContiClick(type) {
      switch (type) {
        case "point":
          this.contrller = true;
          break;
        case "conti":
          this.contrller = false;
          break;
      }
      this.pointContiList.forEach((item) => {
        if (item.type == type) {
          item.bool = true;
        } else {
          item.bool = false;
        }
      });
    },
    /**机器人移动  停止btn*/
    robotMoveStop(cmd) {
      this.isMoveStop = true;
      let params = {};
      //轮式参数
      params = {
        cmd: cmd,
        values: [this.moveSpeed, this.contrller],
      };
      API_robotMove(params).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success(this.$t("操控成功"));
        } else {
          this.$message.error(this.$t("操作失败请重试"));
        }
      });
    },
    /**机器人移动  弹起*/
    robotMoveStopUp() {
      this.isMoveStop = false;
    },
    /**机器人移动  长按*/
    longRobotMove(cmd) {
      switch (cmd) {
        case "1X34": //向左横向行走
          this.isMoveLeft = true;
          break;
        case "1X31": //前进
          this.isMoveForward = true;
          break;
        case "1X33": //向右横向行走
          this.isMoveRight = true;
          break;
        case "1X36": //原地左旋
          this.isMoveRotateLeft = true;
          break;
        case "1X32": //后退
          this.isMoveQuit = true;
          break;
        case "1X35": //原地右旋
          this.isRotateInSitu = true;
          break;
      }
      let params = {};
      //轮式参数
      params = {
        cmd: cmd,
        values: [this.moveSpeed, this.contrller],
      };
      API_robotMove(params).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success(this.$t("操控成功"));
        }
        // } else {
        //   this.$message.error(this.$t("操作失败请重试"));
        // }
      });
    },
    /**机器人移动  松开*/
    stopLongRobotMove(e, cmd) {
      if (
        !this.isMoveLeft &&
        !this.isMoveForward &&
        !this.isMoveRight &&
        !this.isMoveRotateLeft &&
        !this.isMoveQuit &&
        !this.isRotateInSitu
      )
        return;
      // clearInterval(this.robotMoveTimer);
      // this.robotMoveTimer = null;
      let ev = e || window.event;
      this.pauseEvent(ev);
      this.isMoveLeft = false;
      this.isMoveForward = false;
      this.isMoveRight = false;
      this.isMoveRotateLeft = false;
      this.isMoveQuit = false;
      this.isRotateInSitu = false;
      let params = {};
      //轮式参数
      params = {
        cmd: cmd,
        values: [this.moveSpeed, this.contrller],
      };
      API_robotMove(params).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success(this.$t("操控成功"));
        } else {
          this.$message.error(this.$t("操作失败请重试"));
        }
      });
    },
    /**升降臂  停止btn*/
    armStopDown(cmd) {
      switch (cmd) {
        case "1X4":
          this.isArmStop = true;
          break;
        case "1X43":
          this.isArmZero = true;
          break;
      }
      let params = {};
      params = {
        cmd: cmd,
        values: [this.armSpeed, this.contrller],
      };
      API_robotArm(params).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success(this.$t("操控成功"));
        } else {
          this.$message.error(this.$t("操作失败请重试"));
        }
      });
    },
    /**升降臂  停止btn 弹起*/
    armStopUp() {
      this.isArmStop = false;
      this.isArmZero = false;
    },
    /**升降臂  长按*/
    longUpDownArm(cmd) {
      switch (cmd) {
        case "1X41":
          this.isArmUp = true;
          break;
        case "1X42":
          this.isArmDown = true;
          break;
        case "1X58":
          this.isJFOut = true;
          break;
        case "1X59":
          this.isJSInner = true;
          break;
      }
      let params = {};
      params = {
        cmd: cmd,
        values: [this.armSpeed, this.contrller],
      };
      // this.upDownTimer = setInterval(() => {
      API_robotArm(params).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success(this.$t("操控成功"));
        } else {
          this.$message.error(this.$t("操作失败请重试"));
        }
      });
      // }, 500);
    },
    /**升降臂 松开*/
    stopLongUpDownArm(e, cmd) {
      if (!this.isArmUp && !this.isArmDown && !this.isJFOut && !this.isJSInner)
        return;
      // clearInterval(this.upDownTimer);
      // this.upDownTimer = null;
      console.warn("e---", e);
      let ev = e || window.event;
      this.pauseEvent(ev);
      this.isArmUp = false;
      this.isArmDown = false;
      this.isJFOut = false;
      this.isJSInner = false;
      let params = {};
      params = {
        cmd: cmd,
        values: [this.armSpeed, this.contrller],
      };
      API_robotArm(params).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success(this.$t("操控成功"));
        } else {
          this.$message.error(this.$t("操作失败请重试"));
        }
      });
    },
    /**云台控制 停止btn*/
    yunTaiStopDown(cmd) {
      switch (cmd) {
        case "1X5":
          this.isYunTaiStop = true;
          break;
        case "1X57":
          this.isYunTaiZero = true;
          break;
      }
      let params = {};
      params = {
        cmd: cmd,
        values: [this.yunSpeed, this.contrller],
      };
      API_robotYunTai(params).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success(this.$t("操控成功"));
        } else {
          this.$message.error(this.$t("操作失败请重试"));
        }
      });
    },
    /**云台控制 停止btn  弹起*/
    yunTaiStopUp() {
      this.isYunTaiStop = false;
      this.isYunTaiZero = false;
    },
    /**云台控制  长按*/
    longYunTai(cmd) {
      switch (cmd) {
        case "1X53":
          this.isCameroUp = true;
          break;
        case "1X55":
          this.isRedUp = true;
          break;
        case "1X52":
          this.isCamoreLeft = true;
          break;
        case "1X51":
          this.isRedRight = true;
          break;
        case "1X54":
          this.isCameroDown = true;
          break;
        case "1X56":
          this.isRedDown = true;
          break;
      }
      let params = {};
      params = {
        cmd: cmd,
        values: [this.yunSpeed, this.contrller],
      };
      API_robotYunTai(params).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success(this.$t("操控成功"));
        } else {
          this.$message.error(this.$t("操作失败请重试"));
        }
      });
    },
    /**云台控制  松开*/
    stopLongYunTai(e, cmd) {
      if (
        !this.isCameroUp &&
        !this.isRedUp &&
        !this.isCamoreLeft &&
        !this.isRedRight &&
        !this.isCameroDown &&
        !this.isRedDown
      )
        return;
      let ev = e || window.event;
      this.pauseEvent(ev);
      this.isCameroUp = false;
      this.isRedUp = false;
      this.isCamoreLeft = false;
      this.isRedRight = false;
      this.isCameroDown = false;
      this.isRedDown = false;
      let params = {};
      params = {
        cmd: cmd,
        values: [this.yunSpeed, this.contrller],
      };
      API_robotYunTai(params).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success(this.$t("操控成功"));
        } else {
          this.$message.error(this.$t("操作失败请重试"));
        }
      });
    },
    /**可见光 长按 */
    longPress(cmdOne, cmdTwo) {
      if (this.isChoosenMode == 0) return;
      switch (cmdOne) {
        case "4X56":
          this.isZoomLess = true;
          break;
        case "4X55":
          this.isZoomMore = true;
          break;
        case "4X58":
          this.isFocalLess = true;
          break;
        case "4X57":
          this.isFocalMore = true;
          break;
      }
      let params = {};
      if (this.contrller) {
        params = { cmd: cmdOne };
      } else {
        params = { cmd: cmdTwo };
      }
      // this.cameraTimer = setInterval(() => {
      API_cameraControl(params).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success(this.$t("操控成功"));
        } else {
          this.$message.error(this.$t("操作失败请重试"));
        }
      });
      // }, 500);
    },
    /**可见光 松开 */
    stopLongPress(e, cmd) {
      if (this.isChoosenMode == 0) return;
      // clearInterval(this.cameraTimer);
      // this.cameraTimer = null;
      console.warn("e---", e);
      let ev = e || window.event;
      this.pauseEvent(ev);
      this.isZoomLess = false;
      this.isZoomMore = false;
      this.isFocalLess = false;
      this.isFocalMore = false;
      let params = {};
      params = { cmd: cmd };
      API_cameraControl(params).then((res) => {
        if (res.code == 200 && res.data.nerrcode == 0) {
          this.$message.success(this.$t("停止成功"));
        } else {
          this.$message.error(this.$t("操作失败请重试"));
        }
      });
    },
    pauseEvent(e) {
      if (e.stopPropagation) e.stopPropagation();
      if (e.preventDefault) e.preventDefault();
      e.cancelBubble = true;
      e.returnValue = false;
      return false;
    },
  },
  beforeDestroy() {
    clearInterval(this.envTimer);
    this.envTimer = null;
    clearInterval(this.RobotRunModelTimer);
    this.RobotRunModelTimer = null;
    clearInterval(this.robotInfoTimer);
    this.robotInfoTimer = null;
    //清除车体信息
    clearInterval(this.getRobotMoveSpeed);
    this.getRobotMoveSpeed = null;
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/robot.scss";
::v-deep .el-popover {
  min-width: none !important;
}
</style>
<style lang="scss">
.popper-item {
  min-width: 50px !important;
  background: transparent;
  box-shadow: none;
  border: none;
}
</style>
